<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import ButtonGroup from "./ButtonGroup.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import type { ButtonGroupProps } from "./ButtonGroup";
    import Icon from "@iconify/svelte";
    import { Button } from "../Button";

    const { Story } = defineMeta({
        title: "Components/Base/ButtonGroup",
        component: ButtonGroup,
        tags: ["autodocs"],
        argTypes: {
            size: {
                control: "select",
                options: ["default", "small", "large"],
                table: {
                    defaultValue: { summary: "default" },
                },
            },
            type: {
                control: "select",
                options: ["primary", "secondary", "tertiary", "success", "error", "danger", "warning", "default"],
                table: {
                    defaultValue: { summary: "primary" },
                },
            },
            theme: {
                control: "select",
                options: ["light", "solid", "borderless", "outline", "dashed"],
                table: {
                    defaultValue: { summary: "solid" },
                },
            },
            disabled: {
                control: "boolean",
                table: {
                    defaultValue: { summary: "false" },
                },
            },
        },
        args: {},
    });
</script>

{#snippet tempIcon(name: string)}
    <Icon icon={name} />
{/snippet}

<Story name="Default">
    {#snippet template(args)}
        {#snippet IconHome()}
            {@render tempIcon("ion:home")}
        {/snippet}
        {#snippet IconCart()}
            {@render tempIcon("ion:cart")}
        {/snippet}
        {#snippet IconBall()}
            {@render tempIcon("ion:american-football")}
        {/snippet}
        <Space dir="v">
            <ButtonGroup theme="solid" type="primary">
                <Button>拷贝</Button>
                <Button>复制</Button>
                <Button>粘贴</Button>
            </ButtonGroup>

            <ButtonGroup theme="light" type="secondary">
                <Button>拷贝</Button>
                <Button>复制</Button>
                <Button>粘贴</Button>
            </ButtonGroup>

            <ButtonGroup theme="outline" type="tertiary">
                <Button>拷贝</Button>
                <Button>复制</Button>
                <Button>粘贴</Button>
            </ButtonGroup>

            <ButtonGroup theme="light" type="default">
                <Button>拷贝</Button>
                <Button>复制</Button>
                <Button>粘贴</Button>
            </ButtonGroup>

            <ButtonGroup type="primary" size="small">
                <Button>Copy</Button>
                <Button>Paste</Button>
                <Button>Search</Button>
            </ButtonGroup>
            <ButtonGroup type="primary" size="large">
                <Button>Copy</Button>
                <Button>Paste</Button>
                <Button>Search</Button>
            </ButtonGroup>
            <ButtonGroup type="default">
                <Button>Copy</Button>
                <Button>Paste</Button>
                <Button>Search</Button>
            </ButtonGroup>

            <ButtonGroup type="default">
                <Button icon={IconHome} />
                <Button icon={IconCart} />
                <Button icon={IconBall} />
            </ButtonGroup>
            <ButtonGroup type="default" size="large">
                <Button icon={IconHome} />
                <Button icon={IconCart} />
                <Button icon={IconBall} />
            </ButtonGroup>
            <ButtonGroup type="default" disabled>
                <Button icon={IconHome} />
                <Button icon={IconCart} />
                <Button icon={IconBall} />
            </ButtonGroup>
            <ButtonGroup type="default">
                <Button icon={IconHome} />
                <Button icon={IconCart} disabled />
                <Button icon={IconBall} />
            </ButtonGroup>
        </Space>
    {/snippet}
</Story>
